<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="landing-category-data.html">
<link rel="import" href="landing-common-styles.html">
<link rel="import" href="landing-image.html">
<link rel="import" href="landing-list-item.html">

<dom-module id="landing-list">

  <template>

    <style include="landing-common-styles">

      .hero-image {
        position: relative;
        height: 320px;
        overflow: hidden;
        margin-bottom: 32px;
      }

      .hero-image {
        --landing-image-img: {
          position: absolute;
          top: 0;
          bottom: 0;
          left: -9999px;
          right: -9999px;
          max-width: none;
        };
      }

      .grid {
        @apply --layout-horizontal;
        @apply --layout-wrap;
        @apply --layout-justified;
        margin: 0 10px 32px 10px;
        padding: 0;
        list-style: none;
      }

      .grid li {
        -webkit-flex: 1 1;
        flex: 1 1;
        -webkit-flex-basis: 33%;
        flex-basis: 33%;
        max-width: 33%;
      }

      .grid a {
        display:block;
        text-decoration: none;
      }

      @media (max-width: 767px) {
        .hero-image {
          display: none;
        }

        .grid  li {
          -webkit-flex-basis: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }
      }

    </style>

    <!--
      app-route provides the name of the category.
    -->
    <app-route
        route="[[route]]"
        pattern="/:category"
        data="{{routeData}}"></app-route>

    <!--
      landing-category-data provides the category data for a given category name.
    -->
    <landing-category-data
        id="categoryData"
        category-name="[[routeData.category]]"
        category="{{category}}"
        failure="{{failure}}"></landing-category-data>

    <landing-image
        alt="[[category.title]]"
        src="[[category.image]]"
        placeholder-img="[[category.placeholder]]" class="hero-image"></landing-image>

    <header>
      <h1>[[category.title]]</h1>
      <span>[[_getPluralizedQuantity(category.items.length)]]</span>
    </header>

    <ul class="grid" hidden$="[[failure]]">
      <dom-repeat items="[[_getListItems(category.items)]]" initial-count="4">
        <template>
          <li>
            <a href$="[[_getItemHref(item)]]"><landing-list-item item="[[item]]"></landing-list-item></a>
          </li>
        </template>
      </dom-repeat>
    </ul>

    <!--
      landing-network-warning shows a warning message when the items can't be rendered due
      to network conditions.
    -->
    <landing-network-warning
        hidden$="[[!failure]]"
        offline="[[offline]]"
        on-try-reconnect="_tryReconnect"></landing-network-warning>

  </template>

  <script>

    Polymer({

      is: 'landing-list',

      properties: {

        category: Object,

        route: Object,

        routeData: Object,

        visible: {
          type: Boolean,
          value: false
        },

        offline: {
          type: Boolean,
          observer: '_offlineChanged'
        },

        failure: Boolean

      },

      observers: [
        '_categoryChanged(category, visible)'
      ],

      _getListItems: function(items) {
        // Return placeholder items when the items haven't loaded yet.
        return items || [{},{},{},{},{},{},{},{},{},{}];
      },

      _getItemHref: function(item) {
        // By returning null when `itemId` is undefined, the href attribute won't be set and
        // the link will be disabled.
        return item.name ? ['/detail', this.category.name, item.name].join('/') : null;
      },

      _getPluralizedQuantity: function(quantity) {
        if (!quantity) {
          return '';
        }
        var pluralizedQ = quantity === 1 ? 'item' : 'items';
        return  '(' + quantity + ' ' + pluralizedQ + ')';
      },

      _categoryChanged: function(category, visible) {
        if (visible) {
          if (!category) {
            this.fire('show-invalid-url-warning');
          } else {
            this.debounce('change-section', function() {
              // Notify the category and the page's title
              this.fire('change-section', {
                category: category.name,
                title: category.title
              });
            });
          }
        }
      },

      _tryReconnect: function() {
        this.$.categoryData.refresh();
      },

      _offlineChanged: function(offline) {
        if (!offline && this.isAttached) {
          this._tryReconnect();
        }
      }

    });

  </script>

</dom-module>
